
<div ng-controller="RawPreviewController" class="raw-preview-tab">
  <form class="form row form-group-sm" role="form" ng-submit="rawSourcePreview()">

    <div class="col-md-4 raw-source-config">
      <div class="form-group"
           ng-switch="configDefinition.type"
           ng-repeat="configDefinition in detailPaneConfigDefn.rawSourceDefinition.configDefinitions">

        <div ng-switch-when="STRING">
          <label class="control-label">{{configDefinition.label}}
            <i class="fa fa-info-circle help-icon"
               ng-if="configDefinition.description"
               tooltip-placement="right"
               tooltip-append-to-body="false"
               tooltip="{{configDefinition.description}}"
               tooltip-trigger="mouseenter"></i>
          </label>

          <div class="controls">
            <input type="text" class="form-control" name="{{configDefinition.name}}"
                 ng-model="detailPaneConfig.uiInfo.rawSource.configuration[$index].value"
                 ng-required="configDefinition.required">
          </div>
        </div>


        <div class="checkbox" ng-switch-when="BOOLEAN">
          <label class="control-label">{{configDefinition.label}}
            <i class="fa fa-info-circle help-icon"
               ng-if="configDefinition.description"
               tooltip-placement="right"
               tooltip-append-to-body="false"
               tooltip="{{configDefinition.description}}"
               tooltip-trigger="mouseenter"></i>
          </label>

          <div class="controls">
            <input type="checkbox" name="{{configDefinition.name}}"
                   ng-model="detailPaneConfig.uiInfo.rawSource.configuration[$index].value">
          </div>

        </div>

        <div ng-switch-when="NUMBER">
          <label class="control-label">{{configDefinition.label}}
            <i class="fa fa-info-circle help-icon"
               ng-if="configDefinition.description"
               tooltip-placement="right"
               tooltip-append-to-body="false"
               tooltip="{{configDefinition.description}}"
               tooltip-trigger="mouseenter"></i>
          </label>
          <div class="controls">
            <input type="number" class="form-control" name="{{configDefinition.name}}"
                   ng-model="detailPaneConfig.uiInfo.rawSource.configuration[$index].value"
                   ng-required="configDefinition.required">
          </div>

        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-sm pull-left" translate="home.header.preview">Preview</button>
    </div>

    <div class="col-md-8 preview-data form-group" ng-if="rawSourcePreviewData">
      <pre ng-bind="rawSourcePreviewData"></pre>
    </div>

  </form>
</div>